<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="header-left">
          <span class="Logo">蜗牛商城</span>
          <span class="welcome">欢迎您：</span>
          <span class="name">{{ userInfo.account }}</span>
          <img :src="`http://jacklv.cn/images/${userInfo.imgUrl}`" alt="">
        </div>
        <div class="header-right">
          <div>个人中心</div>
          <div @click="LogOut()">退出登录</div>
        </div>
      </el-header>


      <el-container>
        <el-aside width="200px">
          <el-scrollbar>
            <el-menu :default-active="route.path" router>
             <!-- 路由本身用这个item -->
              <el-menu-item index="/nav/home">
                <el-icon>
                  <document />
                </el-icon>
                <span>首页</span>
              </el-menu-item>
             <!-- 包裹二级路由用这个sub-menu -->
              <el-sub-menu index="1">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>店铺管理
                </template>
                <el-menu-item index="/nav/addShop">新增店铺</el-menu-item>
                <el-menu-item index="/nav/shopList">店铺列表</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="2">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>账号管理
                </template>
                <el-menu-item index="/nav/addAccount">新增账号</el-menu-item>
                <el-menu-item index="/nav/accountList">账号列表</el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-scrollbar>
        </el-aside>


        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
    
<script setup lang='ts'>
import { useRouter,useRoute } from 'vue-router';
import { ElMessageBox } from 'element-plus';
import { Document,Location,Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
const router = useRouter()//使用路由，比如跳转
const route = useRoute();//获取路由信息
const userInfo = JSON.parse(localStorage.userInfo)
// 退出登录
function LogOut() {
  ElMessageBox.confirm(
    '您确定要退出登录吗?',
    '提示',
    {

      type: 'warning',
      "closeOnClickModal": false,
    }
  )
    .then(() => {
      //1 清除本地存储 2. 跳转到登录
      localStorage.clear();
      router.replace("/login")

    })
    .catch(() => {

    })
}
</script>
    
<style lang="scss">
.el-container {
  height: 100vh;

  .el-header {
    background-color: #001529;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;

    .header-left {
      display: flex;
      align-items: center;

      .Logo {
        font-size: 32px;
        font-style: italic;
        margin-right: 10px;
      }

      .welcome {
        margin-right: 10px;
      }

      img {
        width: 40px;
        height: 40px;
        border-radius: 40px;
        margin-left: 10px;
      }
    }

    .header-right {
      width: 150px;
      display: flex;
      justify-content: space-between;

      div {
        font-size: 14px;

        &:hover {
          color: rgb(159, 165, 247);
        }
      }
    }
  }

  .el-aside {
    // background-color: red;
  }

  .el-main {
    // background-color: yellow;
  }
}
</style>